<template>
	<view class="content" :style="{paddingTop: top +'px'}">
		<uni-section title="登入" type="line"">
			<view class=" example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="姓名" required name="name">
					<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" label-width="200" />
				</uni-forms-item>
				<uni-forms-item label="电话号码" required name="age" label-width="200">
					<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="password" label-width="200">
					<uni-easyinput type="password" v-model="valiFormData.password" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="hobby"  label-width="200">
					<uni-data-checkbox multiple   :checked="checkedA" @change="checkedClick()"  :localdata="hobbys" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')">登入</button>
			<view class="more">
				<text @click="signIn">注册</text>
			</view>
	</view>
	</uni-section>
	<view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		//通过计算属性获取值
		computed: {
			...mapState(['top'])
		},
		data() {
			return {
				//协议状态
				checkedA: true,
				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					password: '',
					hobby: ''
				},
				// 多选数据源
				hobbys: [{
					text: '确认协议',
					value: 0
				}],
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							length: 11,
							errorMessage: '电话号码必须为'
						}]
					},
					hobby: {
						rules: [{
							required: true,
								format: 'array'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length < 1) {
										callback('请至少勾选两个兴趣爱好')
									}
									return true
								}
							}
						]
					}
				},
			};
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					uni.navigateTo({
						url: '/pages/index/index'
					});
					// 如果有值，就储存到本地存储
					uni.setStorage({
						key: 'number',
						data: this.valiFormData.age
					});
					uni.setStorage({
						key: 'name',
						data: this.valiFormData.name
					});
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			//agreement() {
			//	console.log(11111)
			//	this.$refs.alertDialog.open()
			//},
			dialogConfirm() {
				console.log('点击确认')
				this.valiFormData.hobby = '已同意协议'
				this.messageText = `点击确认了窗口`
				this.$refs.message.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			signIn(){
				console.log('signIn')
			},
			checkedClick(e){
				console.log(e)
				if(e.detail.value[0]==0){
					
				}
				this.$refs.alertDialog.open()
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 40rpx;
		.more{
			width: 100%;
			margin-top: 30rpx;
			text{
				float: right;
			}
		}
	}
</style>